<template>
	<view class="page">
		<navCom title="我的主页"></navCom>
		<view class="group_2 flex-col">
			<view class="group_5 flex-row justify-between">
				<view class="image-text_15 flex-row justify-between">
					<image class="image_4" referrerpolicy="no-referrer" :src="api_host + userProfile.userAvatar" />
					<view class="text-group_9 flex-col">
						<text class="text_3">{{userProfile.nickName}}</text>
						<text class="text_4">
							<text v-if="userProfile.year">{{userProfile.year}}岁</text>
							<text v-if="userProfile.sex">·{{userProfile.sex}}</text>
							<text v-if="userProfile.height">·{{ userProfile.height }}cm</text>
							<text v-if="userProfile.weight">·{{ userProfile.weight }}kg</text>
							<text v-if="userProfile.edu">·{{ userProfile.edu }}</text>
						</text>
						<view class="group_6 flex-row">
							<view class="flex" v-if="userProfile.idCert === 2">
								<image class="thumbnail_15" referrerpolicy="no-referrer"
									src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/sm.png" />
								<text class="text_6">实名</text>
							</view>
							<view class="flex" v-if="userProfile.jobCert === 2">
								<image class="thumbnail_16" referrerpolicy="no-referrer"
									src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/gz.png" />
								<text class="text_7">工作</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="section_3 flex-col"></view>
			<view v-if="userProfile.recentPhoto">
				<view class="image-text_16 flex-row justify-between">
					<image class="label_11" referrerpolicy="no-referrer"
						src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/photo.png" />
					<text class="text-group_2">生活近照</text>
				</view>
				<view class="mt20">
					<uploadImg :imgList="imgList" mode="view"></uploadImg>
				</view>
			</view>
			<view v-for="item in filteredUserInfoTagList" :key="item.id">
				<view class="image-text_17 flex-row">
					<image class="label_12" referrerpolicy="no-referrer" :src="api_host + item.tagIcon" />
					<text class="text-group_3 ml10">{{ item.tagName }}</text>
				</view>
				<view class="group_7 flex-row">
					<view class="text-wrapper_22 mr10" v-for="tag in item.sonTagObj.filter(tag => tag.userSetTag)"
						:key="tag.id">
						<text class="text_37">{{ tag.tagName }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="group_3 flex-col">
			<view class="box_11 flex-row justify-between">
				<image class="label_15" referrerpolicy="no-referrer"
					src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/rz.png" />
				<text class="text_14">认证信息</text>
			</view>
			<text class="text_15">·&nbsp;公开信息（在个人信息中公开）</text>
			<view class="text-wrapper_28 flex-row justify-between">
				<text class="text_16">性别</text>
				<text class="text_17">{{userProfile.sex || '未设置'}}</text>
			</view>
			<view class="text-wrapper_29 flex-row justify-between">
				<text class="text_18">年龄</text>
				<text class="text_19">{{userProfile.year || '未设置'}}</text>
			</view>
			<view class="section_8 flex-col"></view>
			<text class="text_20">
				·&nbsp;私密信息（仅用于实名认证，进行严格加密储存）
			</text>
			<view class="text-wrapper_30 flex-row justify-between">
				<text class="text_21">姓名</text>
				<text
					class="text_22">{{userProfile.realName && $utils.maskedName(userProfile.realName) || '未设置'}}</text>
			</view>
			<view class="text-wrapper_31 flex-row justify-between">
				<text class="text_23">身份证号码</text>
				<text
					class="text_24">{{userProfile.cardNumber && $utils.maskedIdCard(userProfile.cardNumber) || '未设置'}}</text>
			</view>
			<view class="section_9 flex-col"></view>
			<view class="box_12 flex-row justify-between">
				<view class="image-text_20 flex-row justify-between">
					<image class="thumbnail_17" referrerpolicy="no-referrer"
						src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/gz.png" />
					<text class="text-group_6">工作认证</text>
				</view>
				<text class="text_25">{{userProfile.jobCert === 2?'已认证':'未认证'}}</text>
			</view>
			<view class="box_13 flex-row justify-between">
				<view class="image-text_21 flex-row justify-between">
					<image class="thumbnail_18" referrerpolicy="no-referrer"
						src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/hy.png" />
					<text class="text-group_7">婚姻状态认证</text>
				</view>
				<text class="text_26">{{userProfile.marryCert || '未设置'}}</text>
			</view>
			<view class="box_13 flex-row justify-between">
				<view class="image-text_21 flex-row justify-between">
					<image class="thumbnail_18" referrerpolicy="no-referrer"
						src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/gzdw.png" />
					<text class="text-group_7">工作单位</text>
				</view>
				<text class="text_26">{{userProfile.jobUnit || '未设置'}}</text>
			</view>
			<view class="box_13 flex-row justify-between">
				<view class="image-text_21 flex-row justify-between">
					<image class="thumbnail_18" referrerpolicy="no-referrer"
						src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/gzqy.png" />
					<text class="text-group_7">工作区域</text>
				</view>
				<text class="text_26">{{userProfile.jobAddress || '未设置'}}</text>
			</view>
		</view>
		<u-gap height="20"></u-gap>
		<view class="flex">
			<image src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/dt.png" mode=""
				style="width: 60rpx;height: 60rpx;"></image>
			<text class="f28 c343">动态</text>
		</view>
		<view class="mt10" v-if="listData.length > 0">
			<waterfall-flow :dataArray="listData"></waterfall-flow>
		</view>
		<u-gap height="200" v-if="type == 'exam'"></u-gap>
		<view class="bottom-box" v-if="type == 'exam'">
			<view class="">
				<u--textarea class="width100" v-model="form.content" border="none" height="100"
					placeholder="请输入不通过理由"></u--textarea>
			</view>
			<view class="flex-jus mt20">
				<view class="flex1 mr10">
					<u-button type="" shape="circle" color="linear-gradient(170deg, #FFA5F5, #319EFF)"
						:customStyle="{'height':'80rpx'}" @click="reviewActUserBtn(1)">审核通过</u-button>
				</view>
				<view class="flex1 ml10">
					<u-button type="" shape="circle" color="#34314F" :customStyle="{'height':'80rpx'}"
						@click="reviewActUserBtn(2)">审核不通过</u-button>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import navCom from '@/components/nav/nav.vue';
	import uploadImg from '@/components/upload/upload.vue';
	import waterfallFlow from '@/components/waterfall-flow/index.vue';
	import {
		getVloglist
	} from '@/common/api_wan.js';
	import {
		getPersonInfo,
		reviewActUser
	} from '@/common/api_meethuangshi.js'
	export default {
		components: {
			navCom,
			uploadImg,
			waterfallFlow
		},
		data() {
			return {
				type: '',
				userId: '',
				actId: '',
				userProfile: {},
				listData: [],
				imgList: [],
				constants: {},
				form: {}
			};
		},
		computed: {
			filteredUserInfoTagList() {
				if (!this.userProfile.userInfoTagList) return []
				return this.userProfile.userInfoTagList.filter(item =>
					item.sonTagObj && item.sonTagObj.some(tag => tag.userSetTag)
				)
			}
		},
		onLoad(option) {
			this.type = option.type;
			this.userId = option.uid;
			this.actId = option.id;
			this.getPersonInfo();
			this.getVloglist();
		},
		onShow() {

		},
		methods: {
			async getVloglist() {
				const res = await getVloglist();
				this.listData = res.data;
			},
			async getPersonInfo() {
				const res = await getPersonInfo({
					userId: this.userId
				})
				this.userProfile = res.data;
				//this.userProfile.cardNumber = '420281199209182473'
				this.imgList = this.userProfile.recentPhoto ? this.userProfile.recentPhoto.split(',') : []
			},
			async reviewActUserBtn(status) {
				uni.showLoading({
					mask: true
				})
				const res = await reviewActUser({
					status,
					id: this.actId,
					reviewContent: this.form.content
				})
				if (res.code == 200) {
					uni.hideLoading();
					uni.showToast({
						title: '审核成功',
						icon: 'none',
						success() {
							setTimeout(() => {
								uni.navigateBack()
							}, 500)
						}
					})
				}
			}
		},
	};
</script>
<style lang="scss">
	@import '@/common/reset.css';

	.page {
		background-color: #F7F6FF;
		position: relative;
		padding: 30rpx;

		.group_2 {
			background-color: rgba(255, 255, 255, 1);
			border-radius: 20px;
			padding: 30rpx;

			.group_5 {
				margin-right: 12px;

				.image-text_15 {
					width: 136px;

					.image_4 {
						flex: 0 0 56px;
						width: 56px;
						height: 56px;
					}

					.text-group_9 {
						margin: 6px 0 4px 0;

						.text_3 {
							overflow-wrap: break-word;
							color: rgba(52, 49, 79, 1);
							font-size: 16px;
							font-family: PingFangSC-Medium;
							font-weight: 500;
							text-align: left;
							white-space: nowrap;
							line-height: 22px;
						}

						.text_4 {
							overflow-wrap: break-word;
							color: rgba(52, 49, 79, 1);
							font-size: 14px;
							font-weight: normal;
							text-align: left;
							white-space: nowrap;
							line-height: 20px;
							margin: 4px 12px 0 0;
						}
					}
				}

				.text-wrapper_1 {
					background-color: rgba(52, 49, 79, 0.08);
					border-radius: 12px;
					border: 1px solid rgba(255, 255, 255, 0.3);
					margin: 4px 0 28px 0;
					padding: 3px 23px 3px 23px;

					.text_5 {
						overflow-wrap: break-word;
						color: rgba(52, 49, 79, 1);
						font-size: 12px;
						font-weight: normal;
						text-align: right;
						white-space: nowrap;
						line-height: 16px;
					}
				}
			}

			.group_6 {
				margin: 6rpx 0 0 0;

				.thumbnail_15 {
					width: 16px;
					height: 16px;
				}

				.text_6 {
					overflow-wrap: break-word;
					color: rgba(52, 49, 79, 1);
					font-size: 12px;
					font-weight: normal;
					text-align: left;
					white-space: nowrap;
					line-height: 16px;
					margin-left: 2px;
				}

				.thumbnail_16 {
					width: 16px;
					height: 16px;
					margin-left: 10px;
				}

				.text_7 {
					overflow-wrap: break-word;
					color: rgba(52, 49, 79, 1);
					font-size: 12px;
					font-weight: normal;
					text-align: left;
					white-space: nowrap;
					line-height: 16px;
					margin-left: 2px;
				}
			}

			.section_3 {
				background-color: rgba(52, 49, 79, 0.08);
				width: 342px;
				height: 1px;
				margin: 12px 0 0 4px;
			}

			.image-text_16 {
				width: 94px;
				margin: 16px 248px 0 4px;

				.label_11 {
					width: 24px;
					height: 24px;
				}

				.text-group_2 {
					overflow-wrap: break-word;
					color: rgba(52, 49, 79, 1);
					font-size: 16px;
					font-family: PingFangSC-Medium;
					font-weight: 500;
					text-align: left;
					white-space: nowrap;
					line-height: 22px;
					margin-top: 1px;
				}
			}

			.image-wrapper_3 {
				margin: 8px 0 0 0;

				.scroll-view_H {
					white-space: nowrap;
					width: 100%;
				}

				.image-box {
					display: inline-block;
					width: 160rpx;
					height: 160rpx;
					margin-right: 7px;

					.image_5 {
						width: 160rpx;
						height: 160rpx;
					}
				}
			}

			.image-text_17 {
				margin: 16px 0 0 4px;

				.label_12 {
					width: 24px;
					height: 24px;
				}

				.text-group_3 {
					overflow-wrap: break-word;
					color: rgba(52, 49, 79, 1);
					font-size: 16px;
					font-family: PingFangSC-Medium;
					font-weight: 500;
					text-align: left;
					white-space: nowrap;
					line-height: 22px;
					margin-top: 1px;
				}
			}

			.group_7 {
				margin: 8px 0 0 4px;

				.text-wrapper_22 {
					background-color: rgba(52, 49, 79, 0.06);
					border-radius: 14px;
					padding: 8px 12px 8px 12px;

					.text_37 {
						overflow-wrap: break-word;
						color: rgba(52, 49, 79, 1);
						font-size: 14px;
						font-weight: normal;
						text-align: left;
						white-space: nowrap;
						line-height: 20px;
					}
				}

				.text-wrapper_23 {
					background-color: rgba(52, 49, 79, 0.06);
					border-radius: 14px;
					padding: 8px 12px 8px 12px;

					.text_38 {
						overflow-wrap: break-word;
						color: rgba(52, 49, 79, 1);
						font-size: 14px;
						font-weight: normal;
						text-align: left;
						white-space: nowrap;
						line-height: 20px;
					}
				}
			}

			.image-text_18 {
				width: 94px;
				margin: 16px 248px 0 4px;

				.label_13 {
					width: 24px;
					height: 24px;
				}

				.text-group_4 {
					overflow-wrap: break-word;
					color: rgba(52, 49, 79, 1);
					font-size: 16px;
					font-family: PingFangSC-Medium;
					font-weight: 500;
					text-align: left;
					white-space: nowrap;
					line-height: 22px;
					margin-top: 1px;
				}
			}

			.group_8 {
				width: 164px;
				margin: 8px 0 0 4px;

				.text-wrapper_24 {
					background-color: rgba(52, 49, 79, 0.06);
					border-radius: 14px;
					padding: 8px 12px 8px 12px;

					.text_39 {
						overflow-wrap: break-word;
						color: rgba(52, 49, 79, 1);
						font-size: 14px;
						font-weight: normal;
						text-align: left;
						white-space: nowrap;
						line-height: 20px;
					}
				}

				.text-wrapper_25 {
					background-color: rgba(52, 49, 79, 0.06);
					border-radius: 14px;
					padding: 8px 12px 8px 12px;

					.text_40 {
						overflow-wrap: break-word;
						color: rgba(52, 49, 79, 1);
						font-size: 14px;
						font-weight: normal;
						text-align: left;
						white-space: nowrap;
						line-height: 20px;
					}
				}
			}

			.image-text_19 {
				width: 78px;
				margin: 16px 264px 0 4px;

				.label_14 {
					width: 24px;
					height: 24px;
				}

				.text-group_5 {
					overflow-wrap: break-word;
					color: rgba(52, 49, 79, 1);
					font-size: 16px;
					font-family: PingFangSC-Medium;
					font-weight: 500;
					text-align: left;
					white-space: nowrap;
					line-height: 22px;
					margin-top: 1px;
				}
			}

			.group_9 {
				margin: 8px 0 0 4px;

				.text-wrapper_26 {
					background-color: rgba(52, 49, 79, 0.06);
					border-radius: 14px;
					padding: 8px 12px 8px 12px;

					.text_41 {
						overflow-wrap: break-word;
						color: rgba(52, 49, 79, 1);
						font-size: 14px;
						font-weight: normal;
						text-align: left;
						white-space: nowrap;
						line-height: 20px;
					}
				}

				.text-wrapper_27 {
					background-color: rgba(52, 49, 79, 0.06);
					border-radius: 14px;
					padding: 8px 12px 8px 12px;

					.text_42 {
						overflow-wrap: break-word;
						color: rgba(52, 49, 79, 1);
						font-size: 14px;
						font-weight: normal;
						text-align: left;
						white-space: nowrap;
						line-height: 20px;
					}
				}
			}
		}

		.group_3 {
			background-color: rgba(255, 255, 255, 1);
			border-radius: 20px;
			align-self: center;
			margin-top: 12px;
			padding: 30rpx;

			.box_11 {
				width: 94px;
				margin-right: 248px;

				.label_15 {
					width: 24px;
					height: 24px;
				}

				.text_14 {
					overflow-wrap: break-word;
					color: rgba(52, 49, 79, 1);
					font-size: 16px;
					font-family: PingFangSC-Medium;
					font-weight: 500;
					text-align: left;
					white-space: nowrap;
					line-height: 22px;
					margin-top: 1px;
				}
			}

			.text_15 {
				overflow-wrap: break-word;
				color: #999;
				font-size: 12px;
				font-weight: normal;
				text-align: left;
				white-space: nowrap;
				line-height: 16px;
				margin: 18px 0 0 0;
			}

			.text-wrapper_28 {
				margin: 16px 0 0 0;

				.text_16 {
					overflow-wrap: break-word;
					color: rgba(52, 49, 79, 1);
					font-size: 14px;
					font-family: PingFangSC-Medium;
					font-weight: 500;
					text-align: left;
					white-space: nowrap;
					line-height: 20px;
				}

				.text_17 {
					overflow-wrap: break-word;
					color: rgba(52, 49, 79, 1);
					font-size: 14px;
					font-weight: normal;
					text-align: left;
					white-space: nowrap;
					line-height: 20px;
				}
			}

			.text-wrapper_29 {
				margin: 20px 0 0 0;

				.text_18 {
					overflow-wrap: break-word;
					color: rgba(52, 49, 79, 1);
					font-size: 14px;
					font-family: PingFangSC-Medium;
					font-weight: 500;
					text-align: left;
					white-space: nowrap;
					line-height: 20px;
				}

				.text_19 {
					overflow-wrap: break-word;
					color: rgba(52, 49, 79, 1);
					font-size: 14px;
					font-weight: normal;
					text-align: left;
					white-space: nowrap;
					line-height: 20px;
				}
			}

			.section_8 {
				background-color: rgba(52, 49, 79, 0.08);
				height: 1px;
				margin-top: 9px;
			}

			.text_20 {
				overflow-wrap: break-word;
				color: #999;
				font-size: 12px;
				font-weight: normal;
				text-align: left;
				white-space: nowrap;
				line-height: 16px;
				margin: 18px 68px 0 0;
			}

			.text-wrapper_30 {
				margin: 16px 0 0 0;

				.text_21 {
					overflow-wrap: break-word;
					color: rgba(52, 49, 79, 1);
					font-size: 14px;
					font-family: PingFangSC-Medium;
					font-weight: 500;
					text-align: left;
					white-space: nowrap;
					line-height: 20px;
				}

				.text_22 {
					overflow-wrap: break-word;
					color: rgba(52, 49, 79, 1);
					font-size: 14px;
					font-weight: normal;
					text-align: left;
					white-space: nowrap;
					line-height: 20px;
				}
			}

			.text-wrapper_31 {
				margin: 20px 0 0 0;

				.text_23 {
					overflow-wrap: break-word;
					color: rgba(52, 49, 79, 1);
					font-size: 14px;
					font-family: PingFangSC-Medium;
					font-weight: 500;
					text-align: left;
					white-space: nowrap;
					line-height: 20px;
				}

				.text_24 {
					overflow-wrap: break-word;
					color: rgba(52, 49, 79, 1);
					font-size: 14px;
					font-weight: normal;
					text-align: left;
					white-space: nowrap;
					line-height: 20px;
				}
			}

			.section_9 {
				background-color: rgba(52, 49, 79, 0.08);
				height: 1px;
				margin-top: 9px;
			}

			.box_12 {
				margin: 19px 0 0 0;

				.image-text_20 {
					.thumbnail_17 {
						width: 16px;
						height: 16px;
						margin: 3px 0 3px 0;
					}

					.text-group_6 {
						overflow-wrap: break-word;
						color: rgba(52, 49, 79, 1);
						font-size: 14px;
						font-family: PingFangSC-Medium;
						font-weight: 500;
						text-align: left;
						white-space: nowrap;
						line-height: 22px;
						margin-left: 10rpx;
					}
				}

				.text_25 {
					overflow-wrap: break-word;
					color: rgba(52, 49, 79, 1);
					font-size: 14px;
					font-weight: normal;
					text-align: left;
					white-space: nowrap;
					line-height: 20px;
					margin-top: 1px;
				}
			}

			.box_13 {
				margin: 20px 0 0 0;

				.image-text_21 {
					.thumbnail_18 {
						width: 16px;
						height: 16px;
						margin: 3px 0 3px 0;
					}

					.text-group_7 {
						overflow-wrap: break-word;
						color: rgba(52, 49, 79, 1);
						font-size: 14px;
						font-family: PingFangSC-Medium;
						font-weight: 500;
						text-align: left;
						white-space: nowrap;
						line-height: 22px;
						margin-left: 10rpx;
					}
				}

				.text_26 {
					overflow-wrap: break-word;
					color: rgba(52, 49, 79, 1);
					font-size: 14px;
					font-weight: normal;
					text-align: left;
					white-space: nowrap;
					line-height: 20px;
					margin-top: 1px;
				}
			}
		}

		.bottom-box {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 30rpx;
			background-color: #fff;
			border-radius: 50rpx 50rpx 0 0;
		}
	}
</style>